<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聚合支付|收银台</title>
    <link rel="stylesheet" href="/xxpay/layui/css/layui.css">
    <script src="/xxpay/layui/jquery.min.js"></script>
</head>

<body>
<div style="display: none" id="alipay_wap"></div>
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item layui-this">收银台</li>
</ul>
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">订单数据</li>
                </ul>
                <div class="layui-tab-content">
                    <input name="mchId" id="mchId" class="layui-hide" value="${mchId}">
                    <input name="sign" id="sign" class="layui-hide" value="${sign}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">付款金额：</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" lay-verify="required|number" name="amount" id="amount" placeholder="请输入付款金额（元）">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="body" id="body">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <button style="margin-bottom: 5px;margin-left: 30px" type="button" id="pay_btn" lay-submit lay-filter="pay_btn" class="layui-btn">前往支付</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/xxpay/layui/layui.js"></script>
<script>
    layui.use(['form'], function() {
        var form = layui.form
                , $ = layui.$
                , layer = layui.layer;

    var payOrderId = "";
    //提交数据
    form.on('submit(pay_btn)', function(data){
        if (data.field.body == "") {
            data.field.body = "无备注";
        }
        // 在这个回调函数里面写ajax提交
        $.ajax({
            type: 'post',
            url: '/xxpay/api/abcpay/payment/order',
            data: data.field,
            success: function(res){
                if (res.retCode == "FAIL") {
                    layer.msg(res.retMsg);
                    return false;//阻止跳转
                }
                var codeImgUrl = res.payParams.codeImgUrl;
                payOrderId = res.payOrderId;
                layer.open({
                    title: "扫码支付(长按识别二维码)",
                    type: 1,
                    anim: 1,
                    content: "<img width='250' height='250' src='" +  codeImgUrl + "' />"
                });
               var timer = window.setInterval(function (index) {
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "/xxpay/api/abcpay/payment/query",
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",
                        data: {
                            payOrderId : payOrderId
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.status == '3' || data.status == '2') {
                                window.clearInterval(timer);
                                layer.msg(data.msg, {icon:1,time:3000}, function () {
                                    layer.closeAll();
                                    $("#pay_btn").html("重新下单");
                                    location.href = "/xxpay/api/abcpay/payment/success?mchId=${mchId}&sign=${sign}";
                                });
                            }
                        },
                        error: function(Error){
                            layer.msg("下单失败");
                        }
                    });
                }, 1000);
            },
            error: function(){
                layer.msg("请求失败");
            }
        });
        return false;//阻止跳转
    });
});
</script>


</body>
</html>